<template>
  <div class="news">
    <div class="banner">
      <mt-swipe :auto="2000">
        <mt-swipe-item v-for="(item, index) in imglist" :key="index">
          <img class="top-img" :src="item.cover" />
        </mt-swipe-item>
      </mt-swipe>


      <!-- <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item, index) in imglist" :key="index">
          <img class="top-img" :src="require(`${item.cover}`)" />
        </mt-swipe-item>
      </mt-swipe> -->
    </div>
    <!-- <img class="top-img" src="../../assets/001.png" alt=""> -->
    <div class="main_page">
      <div class="title">快讯</div>
    </div>
    <div class="list-wrap">
      <div class="list" v-for="(item, index) in newslist" :key="index">
        <div class="top">{{item.createTime}}</div>
        <div class="foot">{{item.text}}</div>
      </div>
      <!-- <div class="list">
        <div class="top">2024-07-29 15:53:46</div>
        <div class="foot">ASB银行分析师表示，如果纽元持续下跌，将成为G10货币 中今年表现最差的货币。</div>
      </div>
      <div class="list">
        <div class="top">2024-07-29 15:53:46</div>
        <div class="foot">ASB银行分析师表示，如果纽元持续下跌，将成为G10货币 中今年表现最差的货币。</div>
      </div>
      <div class="list">
        <div class="top">2024-07-29 15:53:46</div>
        <div class="foot">ASB银行分析师表示，如果纽元持续下跌，将成为G10货币 中今年表现最差的货币。</div>
      </div>
      <div class="list">
        <div class="top">2024-07-29 15:53:46</div>
        <div class="foot">ASB银行分析师表示，如果纽元持续下跌，将成为G10货币 中今年表现最差的货币。</div>
      </div> -->
    </div>
    <div class="commonFooter">
      <commonFooter active='mine'></commonFooter>
    </div>
  </div>

</template>
<script>
  import commonFooter from './footer';
  import axios from 'axios';
  export default {

    name: 'news',
    data() {
      return {
        imglist: [],
        newslist: []
      };
    },
    components: {
      commonFooter, //  底部导航
    },
    created: function() {},
    watch: {

    },
    mounted() {
      this.getBanner();
      this.getNews();
    },
    methods: {
      getBanner() {
        this.$get('addons/tf-futures/adv/index').then(res => {
          if (res.code == 200) {
            this.imglist = res.data;
          } else {
            this.$layer.msg(res.message || $t("login_fail"));
          }
        });
      },
      getNews() {
        axios.post('http://saiqier.lianghuajia888.com:50010/api/FinancialNews/NewsList')
          .then(response => {
            console.log(response)


            if (response.data.code == 200) {
               this.newslist = response.data.data;
            } else {
              this.$layer.msg(response.message || $t("login_fail"));
            }


          })
          .catch(error => {
            console.error('There was an error!', error);
          });
      }
    }

  };
</script>
<style scoped>
  .banner {
    height: 5rem;
  }

  .news {
    width: 100%;
    background: #242d36;
    min-height: 100vh;
  }

  .top-img {
    width: 100%;
    height: 5rem;
    margin: 0;
  }

  .main_page .title {

    color: #ef9550;
    font-size: 32px;
    padding: .3rem 0.36rem;
    border-bottom: 1px solid #484A47;
  }

  .list-wrap {
    margin-bottom: 100px;
    height: calc(100vh - 5rem);
    overflow-y: auto;
  }

  .list-wrap .list {
    border-bottom: 1px solid #484A47;
    padding: .3rem .1rem;
  }

  .list-wrap .list .top {
    color: #ef9550;
    font-size: 30px;
    padding-bottom: .3rem;
  }

  .list-wrap .list .foot {
    color: #fff;
    font-size: 28px;
  }
</style>
